<!--
 * @version: 
 * @Author: yu
 * @Date: 2023-07-06 18:10:43
 * @LastEditors: Andy
 * @LastEditTime: 2023-07-12 10:54:41
-->
<template>
  <div>
    <!-- <h1></h1> -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="#">{{ route.name }}</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="primary" @click="add">添加</el-button>
    
    <!-- 弹窗 -->
    <v-dialog ref="dialog" :isShow="isShow" :isAdd="isAdd" @cancel="cancel"></v-dialog>

    <!-- 列表 -->
    <list @edit="edit"></list>

  </div>
</template>
<script setup>
import vDialog from './dialog.vue'
import list from './list.vue'
import { onMounted, reactive, toRefs, ref } from 'vue'
import { useRoute, useRouter, currentRoute } from 'vue-router'


const isShow = ref(false)  //定义弹窗
const isAdd = ref(true)    //true是添加


let route = useRoute()
let router = useRouter()

const dialog = ref()

  
//添加显示弹窗
function add() {
  // console.log(info);
  isShow.value = true
  isAdd.value = true
}

//子传父取消弹窗
const cancel = (e) => {
  isShow.value = e
}

//子传父编辑
function edit(id) {
  // console.log(id);
  isShow.value = true
  isAdd.value = false
  // console.log(id);
  // console.log(dialog);
  dialog.value.getDetail(id);
}



onMounted(() => {
  document.title = router.currentRoute.value.meta.title
})
</script>
<style scoped>
.el-button {
  margin-top: 20px;
  margin-bottom: 15px;
}
</style>